<template>
  <view class="page">
    <view class="flex-col list">
      <view
        class="list-item justify-center"
        :key="i"
        v-for="(item, i) in dataList"
        style="flex-shrink: 0; position: relative"
      >
        <view
          style="
            box-sizing: border-box;
            background-color: #dabc8f;
            position: absolute;
            top: 0;
            left: 0;
            color: #ffffff;
            border-top-left-radius: 12rpx;
            width: 40rpx;
            text-align: center;
            border-bottom-right-radius: 12rpx;
            font-size: 22rpx;
            padding: 1px 4px;
          "
          v-if="item.new || item.label_new"
          >新</view
        >

        <view
          class="left-section flex-col items-center"
          :style="{
            backgroundImage: `url(${item.avatar}?x-oss-process=image/resize,m_fill,quality,q_100,w_400,h_400)`,
            position: 'relative',
            'background-size': '140rpx 140rpx',
          }"
          @click="previewimageavatar(item.avatar)"
          style="height: 140rpx"
        >
          <view
            style="position: absolute; top: -15px; right: 0"
            v-if="item.label_hot"
          >
            <image
              src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/hot.gif"
              class="label_hot"
              mode="widthFix"
            ></image>
          </view>

          <view
            style="position: absolute; bottom: -10px; right: 0"
            v-if="item.label_excellent"
          >
            <image
              src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/9e353c559b63b4cdb7cfce6c94bcf037.gif"
              class="label_excellent"
              mode="widthFix"
            ></image>
          </view>

          <!-- 					<image v-if="item.label_new" src="/static/my/tnew.png" class="image_5">
					</image> -->

          <view class="ul1" v-if="item.yue == 1 && item.work_status"
            >可服务</view
          >
          <view class="ul4" v-else-if="item.yue == 2 && item.work_status"
            >可预约</view
          >
          <view class="ul2" v-else>服务中</view>
        </view>

        <view class="center-group flex-col">
          <view class="group_4 flex-row">
            <!-- <navigator :url="`../../bundle/pages/home/home?id=${item.id}`"><text class="text_5 text_6">{{ item.realname }}</text></navigator> -->
            <view
              ><text class="text_5 text_6">{{ item.realname }}</text></view
            >
            <text class="moreImg" @click="preview(item.album)">生活照</text>
          </view>
          <view class="group_5 flex-row flex ane">
            <u-icon
              v-for="(sitem, sindex) in 1"
              :key="sindex"
              name="star-fill"
              size="16"
              color="#ff6100"
            >
            </u-icon>
            <text class="text_7">{{ item.praise }}</text>
            <text class="t8">已服务:{{ item.sales }}单</text>
          </view>

          <view class="group_7 flex-row">
            <image
              src="/static/my/s.png"
              class="image_13"
              @click="toTeinfoall(item.id)"
            />
            <text class="text_12 text_13" @click="toTeinfoall(item.id)">{{
              item.shop_name
            }}</text>
            <image
              src="/static/my/p.png"
              class="image_15"
              @click="toComment(item)"
            />
            <text class="text_14 text_15">{{ item.comment }}</text>
            <image
              v-if="item.collect"
              src="/static/my/itemc.png"
              class="image_17"
              @click="changeCollect(item, i, 0)"
            />
            <image
              v-else
              src="/static/my/s1.png"
              class="image_17"
              @click="changeCollect(item, i, 1)"
            />

            <text class="text_16 text_17">{{ item.collectCount }}</text>
          </view>
        </view>
        <view class="right-group flex-col">
          <view class="flex ane image_71txt" style="justify-content: flex-end">
            <image src="/static/my/d.png" class="image_71" />
            <text class="text_19">{{ item.distance }}km</text>
          </view>
          <view
            class="bottom-text-wrapper flex-col items-center"
            @click="toPath(item)"
            v-if="item.yue == 1 && item.work_status"
          >
            <text>立即下单</text>
          </view>
          <view
            class="bottom-text-wrapper flex-col items-center"
            @click="toPath(item)"
            v-else-if="item.yue == 2 && item.work_status"
          >
            <text>立即预约</text>
          </view>
          <view
            class="bottom-text-wrapper flex-col items-center gayer"
            @click="toPath(item)"
            v-else
          >
            <text>正在上钟</text>
          </view>
        </view>
      </view>
    </view>

    <!--底部弹出-->
    <u-popup
      :show="showInfo"
      mode="bottom"
      @close="close"
      round="10"
      :closeable="true"
    >
      <view style="padding-top: 40px">
        <view class="info-head">
          <view class="head-wrpper">
            <view class="section_2 flex-row">
              <view class="image">
                <image
                  style="width: 130rpx; height: 130rpx; border-radius: 50%"
                  mode="scaleToFill"
                  :src="technician.avatar"
                >
                </image>
              </view>

              <view class="text-group_6 flex-col justify-between">
                <view class="text_1 flex">
                  <view>{{ technician.realname }}</view>
                  <u-rate
                    :count="tecount"
                    v-model="tecount"
                    activeColor="#FF6100"
                  ></u-rate>
                  <view style="color: #ff6100">{{ technician.praise }}</view>
                </view>

                <view class="paragraph_1">
                  {{ technician.profile }}
                </view>
                <view class="flex-row section_4" @click="toTeinfo">
                  <view class="flex-row">
                    <image
                      class="icon_3"
                      src="/static/add/0.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">实名认证</text>
                  </view>
                  <view class="image-text_31 flex-row justify-between">
                    <image
                      class="icon_3"
                      src="/static/add/1.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">爽约包退</text>
                  </view>
                  <view class="image-text_32 flex-row justify-between">
                    <image
                      class="icon_3"
                      src="/static/add/2.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">资质证书</text>
                  </view>
                  <view class="">
                    <image
                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844681219446616.png"
                      class="image_6"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="comment-cont" v-if="commentShow" @click="toTeinfo">
            <view>
              <image
                class="icon_3"
                src="/static/add/0.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">实名认证</text>
            </view>
            <view>
              <image
                class="icon_3"
                src="/static/add/1.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">爽约包退</text>
            </view>
            <view>
              <image
                class="icon_3"
                src="/static/add/2.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">资质证书</text>
            </view>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844681219446616.png"
              class="image_6"
            />
          </view>

          <view class="center-wrpper">
            <view v-if="!commentShow">
              <view
                class="flex item-wrpper"
                :key="i"
                v-for="(item, i) in service"
              >
                <view class="img">
                  <image
                    :src="item.cover"
                    style="width: 150rpx; height: 116rpx; border-radius: 5rpx"
                  >
                  </image>
                </view>
                <view class="group_2 flex-col justify-between">
                  <view class="text-wrapper_2 flex-row">
                    <view class="title">{{ item.name }}</view>
                    <view class="title1">超{{ item.sales }}人选择</view>
                  </view>
                  <view class="box_8 flex-row">
                    <view class="left-group flex ane">
                      <text class="text_18 price-font"
                        ><text class="text_16">￥</text>{{ item.price }}</text
                      >
                      <view
                        style="display: inline-flex; color: #727272"
                        class="text_22 flex ane"
                      >
                        <image src="/static/images/t2.png" class="image_5" />
                        <text class="text_14">{{ item.duration }}分钟</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  class="icon_6 flex-col"
                  v-if="technician.work_status == 1"
                  @click="todetails(item.id, technician_id)"
                  >立即下单</view
                >
                <view class="icon_6 flex-col" v-else>休息中</view>
              </view>
            </view>
            <view
              class="comment"
              v-else
              v-for="item in comment"
              @click="toPress(item)"
            >
              <view class="comment1 flex justify-between">
                <view class="flex"
                  >匿名用户<u-rate
                    :value="item.service_score"
                    :readonly="true"
                    activeColor="#FF6100"
                  ></u-rate>
                </view>
                <view>{{ item.create_time }}</view>
              </view>
              <view class="comment2">
                {{ item.content }}
              </view>
              <view class="comment3 flex">
                <view v-for="item2 in item.name" class="comment3-item">
                  {{ item2 }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
var that = null
export default {
  data() {
    return {
      listbJVHRZ5E: [],
      latitude: "",
      longitude: "",
      value: "",
      dataList: [],
      total: 0,
      loading: true,
      page: 1,
      city: "",
      local: 0,
      addressFlg: false,
      showInfo: false,
      technician: {
        nickname: "",
        realname: "",
        avatar: "",
        album: [],
        praise: "",
        sales: 0,
        credit: -1,
        service: "",
        height: 0,
        birthday: 0,
        practice: 0,
        profile: "0",
        collect: 0,
        province: "",
      },
      service: [],
      collect: "",
      comment: [],
      technician_id: "",
      tecount: 1,
      tevalue: 1,
      commentShow: false,
      initLocation: "",
      imgs: [],
      isNodata: false,
      loadTech: false,
    };
  },
  onReachBottom() {
    if (this.total === this.dataList.length) {
      return;
    }
    this.page++;
    this.init();
  },
  onLoad() {
    that = this;
    that.loadinit();
  },
  methods: {
    init() {
      let obj = {
        lat: this.latitude,
        lng: this.longitude,
        page: this.page,
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$http.post("api/collect/index", obj).then((res) => {
        let { list, total, count } = res;
        this.total = count;
        list.forEach((item) => {
          item.collect = 1;
        });

        this.dataList.push(...list);
        that.isNodata = list.length < 1 ? true : false;
        uni.hideLoading();
      });
    },
    loadinit() {
      const self = this;

      let localPos = uni.getStorageSync("location");
      if (localPos) {
        localPos = JSON.parse(localPos);
        (self.latitude = localPos.lat), (self.longitude = localPos.lng);
        self.init();
        self.loadTech = true;
      }

      this.Commond
        .getLocation()
        .then((res) => {
          (self.latitude = res.lat), (self.longitude = res.lng);

          this.Commond.getAddressForPos(res.lat, res.lng).then((address) => {
            self.city = address.district;
            uni.setStorageSync("address_info", {
              address:
                address.province +
                address.city +
                address.district +
                address.street,
              location: {
                lat: res.lat,
                lng: res.lng,
              },
              city: address.district,
            });
          });

          if (!self.loadTech) self.init();
        })
        .catch((err) => {
          console.log(err);
          uni.showModal({
            title: "提示",
            content: "您未授权定位，无法准确分配附近技师",
          });
        });
    },
    toPath(item) {
      if (Number(item.yue) == 0) {
        uni.showToast({
          title: "该技师正在上钟",
          icon: "none",
        });
        return;
      }
      this.commentShow = false;
      this.getInfo(item.technician_id ? item.technician_id : item.id);
      this.showInfo = true;
    },
    toTeinfo(e) {
      uni.navigateTo({
        url: "/bundle/pages/home/teinfo?id=" + this.technician_id,
      });
    },
    toTeinfoall(e) {
      uni.navigateTo({
        url: "/bundle/pages/home/teinfo?id=" + e,
      });
    },
    todetails(id, technician_id) {
      uni.navigateTo({
        url: `/pages/details/details?id=${id}&type=1&technician_id=${technician_id}`,
      });
    },
    toComment(item) {
      this.getInfo(item.technician_id ? item.technician_id : item.id);
      this.showInfo = true;
      this.commentShow = true;
    },
    close() {
      this.showInfo = false;
    },
    changeCollect(e, index, type) {
      var that = this;
      this.$http
        .post("api/collect/collect", {
          technician_id: e.technician_id ? e.technician_id : e.id,
        })
        .then((res) => {
          if (this.isCollection) {
            this.dataList.splice(index, 1);

            this.total--;
          } else {
            this.dataList[index].collect = !this.dataList[index].collect;
            if (type == 0) {
              this.dataList[index].collectCount--;
            } else {
              this.dataList[index].collectCount++;
            }
          }
        });
    },
    async getInfo(id) {
      this.technician_id = id;
      let data = await this.$http.post("api/technician/details", {
        id: id,
        type: 1,
      });
      for (let i in data) {
        this[i] = data[i];
      }
    },
    check_user_login(callback) {
      var islogin = false;
      this.judgeLogin(function () {
        islogin = true;
      });
      if (islogin) {
        callback();
      } else {
        uni.showModal({
          title: "提示",
          content: "您还未登录，请先登录~",
          confirmText: "去登录",
          cancelText: "再逛会",
          success: (res) => {
            if (res.confirm) {
              var loginurl = "";
              var ua = window.navigator.userAgent.toLowerCase();
              if (ua.match(/micromessenger/i) == "micromessenger") {
                loginurl = "/pages/user/login22";
              } else {
                loginurl = "/pages/user/login2222";
              }
              uni.navigateTo({
                url: loginurl,
              });
            }
          },
        });
      }
    },
    previewimage(imageUrl) {
      //预览图片
      this.check_user_login(function () {
        var images = [];
        images.push(imageUrl);
        imageUrl = this.Commond.imgurlreplace(imageUrl);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: imageUrl,
        });
      });
    },
    previewimageavatar(imageUrl) {
      //预览图片
      this.check_user_login(function () {
        var images = [];
        images.push(imageUrl);
        images = this.Commond.imgurlreplace(images);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: images,
        });
      });
    },
    preview(imageUrl) {
      var self = this;
      this.check_user_login(function () {
        imageUrl = this.Commond.imgurlreplace(imageUrl);
        self.$preview.open(imageUrl);
      });
    },
  },

  onPullDownRefresh() {
    let _self = this;
    setTimeout(() => {
      uni.stopPullDownRefresh(); //停止当前页面下拉刷新
      this.page = 1;
      this.dataList = [];
      this.total = null;
      this.init();
    }, 500);
  },
};
</script>

<style scoped lang="scss">
.digbody {
  overflow: hidden;
}
.page {
  //padding-bottom: 338rpx;
  background-color: #f7f7f7;
  height: 100%;
  width: 100%;

  .comment-cont {
    height: 90rpx;
    background-color: white;
    margin-top: 17rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    view {
      flex: 1;
      display: flex;
      align-items: center;
      height: 90rpx;
      color: #333333;
      font-size: 24rpx;

      image {
        margin-right: 10rpx;
        width: 26rpx;
      }
    }
  }

  .info-head {
    background-color: #f7f7f7;
    padding: 25rpx 20rpx 0 20rpx;

    .head-wrpper {
      height: 200rpx;
      background: #ffffff;
      border-radius: 18rpx;
      border: 2rpx solid #38987c;

      .section_2 {
        padding: 20rpx;

        .image {
          margin-right: 10rpx;
        }

        .text-group_6 {
          .section_4 {
            width: 500rpx;
            justify-content: space-around;
            margin-top: 10rpx;

            .icon_3 {
              width: 25rpx;
              height: 25rpx;
              margin-top: 3rpx;
              margin-right: 8rpx;
            }

            .text_1 {
              font-size: 24rpx;
            }
          }

          .paragraph_1 {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #767676;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; // 想要超出三行显示 就把这里改成3就好了
          }
        }
      }
    }

    .center-wrpper {
      margin-top: 20rpx;
      justify-content: space-around;
      max-height: 60vh;
      overflow-y: auto;
      will-change: transform;
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translate3d(0, 0, 0);

      .comment {
        padding: 20rpx;
        background: #ffffff;
        color: #767676;
        border-radius: 18rpx;
        margin-bottom: 20rpx;
        font-size: 27rpx;

        .comment1 {
          font-size: 26rpx;
        }

        .comment2 {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #767676;
          padding: 5rpx 0;
        }

        .comment3 {
          flex-wrap: wrap;

          .comment3-item {
            padding: 5rpx 20rpx;
            background: #efefef;
            border-radius: 5rpx;
            margin-right: 16rpx;
            margin-top: 10rpx;
            color: #767676;
          }
        }
      }

      .item-wrpper {
        padding: 20rpx;
        background: #ffffff;
        border-radius: 18rpx;
        margin-bottom: 20rpx;
        position: relative;
        .icon_6 {
          height: 60rpx;
          padding: 0 10px;
          font-size: 28rpx;
          line-height: 60rpx;
          text-align: center;
          color: #ffffff;
          background: #38987c;
          border-radius: 14rpx;
          position: absolute;
          right: 10px;
          bottom: 10px;
        }

        .group_2 {
          margin-left: 20rpx;
          width: 400rpx;

          .left-group {
            // margin-top: 14rpx;
            white-space: nowrap;
            // height: 44rpx;

            .text_16 {
              color: #ff6100;
              font-size: 24rpx;
            }

            .price-font1 {
              font-size: 22rpx;
              color: #727272;
              margin-left: 8rpx;
            }

            .text_14 {
              font-size: 22rpx;
              color: #727272;
            }

            .text_18 {
              font-family: Price-Bold;
              color: #ff6100;
              font-size: 32rpx;
            }
          }

          .text-wrapper_2 {
            .title {
              font-size: 30rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #333333;
            }

            .title1 {
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #727272;
              margin-left: 10rpx;
              margin-top: 8rpx;
            }
          }
        }
      }
    }
  }

  .no {
    padding-top: 300rpx;
  }

  .search_wrapper {
    padding: 0rpx 32rpx 20rpx;
    // background-color: rgb(49, 208, 129);
    background: #fff;

    .search {
      padding: 10rpx 0rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 32rpx;

      .image {
        width: 44rpx;
        height: 44rpx;
      }

      .text {
        color: #333;
        font-size: 28rpx;
        line-height: 50rpx;
        white-space: nowrap;
      }

      .text_1 {
        margin-left: 24rpx;
        color: rgb(153, 153, 153);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
  }

  .section_1 {
    padding: 0 32rpx 250rpx;
    // background-image: linear-gradient(180deg,
    // 		rgb(49, 208, 129) 0%,
    // 		rgb(49, 208, 129) 2.91%,
    // 		rgb(36, 194, 116) 75.56%,
    // 		rgb(248, 248, 248) 92.1%,
    // 		rgb(248, 248, 248) 100%);

    .group_1 {
      margin-top: 15rpx;
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .group_3 {
        margin-left: 54rpx;

        .image_4 {
          margin-bottom: 4rpx;
          width: 28rpx;
          height: 34rpx;
        }

        .text_3 {
          margin-left: 14rpx;
        }
      }

      .image_3 {
        width: 40rpx;
        height: 40rpx;
      }

      .text_2 {
        margin-left: 8rpx;
      }
    }
  }
  .list {
    padding: 0 16rpx;
    position: relative;
    height: 100vh;
    .list-item {
      padding: 20rpx;
      padding-left: 10rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 28rpx;
      height: 230rpx;
      margin-top: 20rpx;
      flex-shrink: 0;
      position: relative;

      &:last-of-type {
        margin-bottom: 20rpx;
      }
      .left-section {
        padding-top: 140rpx;
        color: rgb(255, 255, 255);
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: nowrap;
        border-radius: 50%;

        background-position: 0px 0px;
        background-size: cover;
        background-repeat: no-repeat;
        width: 140rpx;
        // height: 140rpx;
        position: relative;

        .image_5 {
          width: 35rpx;
          height: 22rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .text-wrapper {
          padding-bottom: -20rpx;
          background-color: rgb(24, 181, 103);
          border-radius: 18rpx;
          padding: 0 10rpx;
          font-size: 23rpx;
          position: relative;
        }
      }

      .center-group {
        margin-left: 16rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 4rpx 0;

        .group_4 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;

          .text_5 {
            color: rgb(0, 0, 0);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            white-space: nowrap;
          }

          .text_6 {
            color: #333;
            font-size: 30rpx;
            font-weight: 600;
            line-height: initial;
            white-space: initial;
          }

          .image_7 {
            margin: 4rpx 0 4rpx 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .group_5 {
          margin-top: 0rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_9 {
            width: 80rpx;
            height: 24rpx;
          }

          .image_11 {
            margin-left: 4rpx;
            width: 52rpx;
            height: 24rpx;
          }

          .text_7 {
            margin-left: 8rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6100;
            margin-right: 6px;
          }
        }

        .group_6 {
          margin-top: 0rpx;
          color: rgb(243, 151, 53);
          font-size: 22rpx;
          line-height: 34rpx;
          white-space: nowrap;

          .left-text-wrapper {
            padding: 2rpx 0 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 30rpx;

            .text_9 {
              margin-left: 12rpx;
              margin-right: 10rpx;
            }
          }

          .right-text-wrapper {
            margin-left: 8rpx;
            padding: 2rpx 10rpx 4rpx;
            background-color: rgba(243, 151, 53, 0.16);
            border-radius: 8rpx;
            height: 40rpx;
          }
        }

        .group_7 {
          margin-top: 16rpx;
          color: rgb(153, 153, 153);
          font-size: 20rpx;
          line-height: 28rpx;
          white-space: nowrap;

          .image_13 {
            width: 28rpx;
            height: 33rpx;
            margin-right: 8rpx;
          }

          .text_12 {
            margin-left: 4rpx;
          }

          .text_13 {
            margin-left: initial;
            color: #727272;
            // margin-right: 8rpx;
            font-size: 24rpx;
          }

          .image_15 {
            margin-left: 18rpx;
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }

          .text_14 {
            margin-left: 4rpx;
          }

          .text_15 {
            margin-left: initial;
            font-size: 24rpx;
            color: #727272;
          }

          .image_17 {
            margin-right: 8rpx;
            width: 36rpx;
            height: 30rpx;
            margin-left: 17rpx;
          }

          .text_16 {
            margin-left: 0rpx;
            font-size: 24rpx;
            color: #727272;
          }

          .text_17 {
            margin-left: initial;
          }
        }
      }

      .right-group {
        // margin-left: 10rpx;
        // margin-right: 24rpx;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 0 0rpx 0;
        position: relative;

        .top-text-wrapper {
          padding: 4rpx 10rpx 2rpx;
          line-height: 34rpx;
          white-space: nowrap;
          background: #e5fdf5;
          border-radius: 9rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          position: absolute;
          right: 0;
        }

        .opacity-0 {
          opacity: 0;
        }

        .text_19 {
          // margin-top: 10rpx;
          // align-self: flex-end;
          color: #333;
          font-size: 26rpx;

          white-space: nowrap;
        }

        .bottom-text-wrapper {
          align-self: flex-end;
          color: rgb(255, 255, 255);
          font-size: 26rpx;
          white-space: nowrap;
          background-image: linear-gradient(
            116.3deg,
            rgb(53, 219, 160) 0%,
            rgb(53, 219, 160) -13.77%,
            rgb(24, 181, 103) 111.69%,
            rgb(24, 181, 103) 100%
          );
          width: 156rpx;
          height: 60rpx;
          background: #38987c;
          border-radius: 12rpx;
          line-height: 60rpx;
        }

        .yuyue {
          background: #ffffff;
          border: #38987c 1px solid;
          color: #38987c;
        }

        .gayer {
          background: rgba(228, 228, 228, 1);
        }
      }
    }
  }
}

.pos {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  border-radius: 50%;
}

.unab .uni-nav-bar-text {
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
}

.b5 {
  width: 535rpx;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 28rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
}

.rows1 {
  align-items: center;
}
.label_hot {
  width: 27px;
}
.label_excellent {
  width: 27px;
}
.imgLey {
  -webkit-animation-name: scaleDraw;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.5s;
}

@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.ul1 {
  width: 128rpx;
  height: 42rpx;
  background: #38987c;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}
.ul4 {
  width: 128rpx;
  height: 42rpx;
  color: rgb(56, 152, 124);
  border: rgb(56, 152, 124) 1px solid;
  background-color: #fff;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}
.ul2 {
  width: 128rpx;
  height: 42rpx;
  //background: #38987c;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #797979;
  border: #797979 solid 2rpx;
  text-align: center;
  line-height: 42rpx;
  margin-top: 12rpx;
}

.ul3 {
  width: 128rpx;
  height: 42rpx;
  border-radius: 21px;
  border: 1px solid #727272;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.moreImg {
  width: 114rpx;
  height: 42rpx;
  color: rgb(56, 152, 124);
  border: rgb(56, 152, 124) 1px solid;
  background-color: #fff;
  border-radius: 9rpx;
  display: inline-block;
  margin-left: 15rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: center;
  line-height: 42rpx;
}

.t8 {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
}

.image_71 {
  width: 22rpx;
  height: 26rpx;
  margin-right: 7rpx;
  margin-top: 6rpx;
}

.image_71txt {
  color: #333;
  font-size: 26rpx;
}

.image_6 {
  margin: 4rpx 0;
  width: 32rpx;
  height: 32rpx;
}

.image_5 {
  width: 24rpx;
  height: 24rpx;
  margin-left: 14rpx;
  margin-right: 3rpx;
}
</style>
